<!--
 * @Author: RAY_HUI 1541917867@qq.com
 * @Date: 2025-07-07 10:24:49
 * @LastEditors: RAY_HUI 1541917867@qq.com
 * @LastEditTime: 2025-08-11 10:08:52
 * @FilePath: \website-reconstruction---vue\src\components\sections\home\WhyChooseUs.vue
 * @Description: 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { computed } from 'vue'
import { DataProp } from '@/types/selfdefine/Layout'
import { getRandomAnimation } from '@/utils/tools/tools'
import { useLangStore } from '@/stores/langStore'
import { storeToRefs } from 'pinia'
const { tipsButton } = storeToRefs(useLangStore())
// ✅ 使用 computed 自动响应 props.data 变化
const items = computed(() => {
  // 防御：如果没有数据，返回空数组
  if (!props.data?.partContentVoList) {
    return []
  }

  return props.data.partContentVoList.map((item, index) => {
    return {
      id: item.partId,
      icon: Icons[index % Icons.length], // 用取模防止越界
      title: item.title,
      description: item.content,
      routeName: item.url,
      animation: getRandomAnimation(), // 每次计算生成新动画（注意：可能引起动画重播）
      linkText: tipsButton,
    }
  })
})
const Icons = [
  'fas fa-layer-group',
  'far fa-chart-bar',
  'fas fa-database',
  'fas fa-cogs',
]
const router = useRouter()
const props = defineProps<{
  data: DataProp | undefined
}>()
interface ChooseUsItem {
  id: number
  icon: string
  title: string
  description: string
  linkText?: string
  routeName?: string
  animation: string
}

const goToDetail = (route?: string) => {
  if (route) {
    router.push(route)
  }
}
</script>

<template>
  <section class="choose-grid section-padding bg-light-white">
    <div class="container" v-if="data.partTitle">
      <div class="section-header text-center">
        <div class="section-heading">
          <h3 class="text-custom-black">
            {{ data.partTitle.slice(0, 3) }}
            <span class="text-custom-blue"> {{ data.partTitle.slice(3) }}</span>
          </h3>
          <div class="section-description">
            <p class="text-light-dark">
              {{ data.content }}
            </p>
          </div>
        </div>
      </div>
      <div class="row">
        <div
          v-for="item in items"
          :key="item.id"
          class="col-lg-3 col-md-6 text-center mb-3"
          :class="`wow ${item.animation}`"
        >
          <div class="choose-wrap">
            <div class="choose-icon">
              <i :class="item.icon" style="color: #203ae4"></i>
            </div>
            <h4>{{ item.title }}</h4>
            <p>{{ item.description }}</p>
            <a
              href="#"
              style="color: #203ae4"
              @click.prevent="goToDetail(item.routeName)"
            >
              {{ item.linkText }}
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
